<script setup>
import { MessagePlugin } from 'tdesign-vue-next'
onMounted(() => { })

const router = useRouter()

const rules = {
  userName: [
    { required: true, message: '姓名必填', type: 'error', trigger: 'blur' },
    { required: true, message: '姓名必填', type: 'error', trigger: 'change' },
    { whitespace: true, message: '姓名不能为空' },
    { min: 2, message: '输入字数应在2到8之间', type: 'error', trigger: 'blur' },
    { max: 8, message: '输入字数应在2到8之间', type: 'error', trigger: 'blur' }
  ],
  userPwd: [{ required: true, message: '必填', type: 'error', trigger: 'blur' }]
}

const onReset = () => { }

const loginData = reactive({
  userName: '',
  userPwd: '',
})

const msg = ref(null)

const onSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    msg.value = MessagePlugin.loading({ content: '登陆中...', duration: 0 })
    setTimeout(() => {
      MessagePlugin.close(msg.value)
      msg.value = MessagePlugin.success({ content: '登陆成功!', duration: 1500 })
    }, 1500)
  } else {
    console.log('Validate Errors: ', firstError, validateResult)
    MessagePlugin.warning(firstError)
  }
}
</script>

<template>
  <div class="w-100">
    <div class="w-100 border-bottom position-relative">
      <t-space align="center" class="space-border login-title">
        <i-material-symbols:login-rounded class="fs-2" />
        <span class="h2">用户登陆</span>
      </t-space>
      <div class="return-btn" @click="() => {router.back()}">
        <i-akar-icons:arrow-back-thick />返回
      </div>
    </div>
    <div class="w-25 form-stle">
      <t-form labelAlign="top" colon requiredMark ref="formValidatorStatus" :data="loginData" :rules="rules"
        :label-width="80" :status-icon="true" @reset="onReset" @submit="onSubmit">

        <t-form-item label="用户名" name="userName">
          <t-input v-model="loginData.userName" placeholder="不是昵称,是登陆用户名"></t-input>
        </t-form-item>

        <t-form-item label="密码" name="userPwd">
          <t-input v-model="loginData.userPwd" placeholder="不少于6个字符"></t-input>
        </t-form-item>
        <t-space size="small">
          <t-button theme="primary" type="submit">提交</t-button>
          <t-button theme="default" variant="base" type="reset">重置</t-button>
        </t-space>
      </t-form>
    </div>
  </div>
</template>

<style scoped lang="less">
.login-title {
  height: 120px;
}

.return-btn {
  position: absolute;
  color: @point-color;
  margin-top: 24px;
  opacity: 0.8;
  right: 0px;
  top: 0;
}

.return-btn:hover {
  cursor: pointer;
  opacity: 1;
}

.form-stle {
  margin: 24px 0;
}
</style>
